<html>
<head>
	<link rel="stylesheet" type="text/css" href="styles.css" />
	<script type="text/javascript" src="script.js"></script>
	<script type="text/javascript" src="controller.js"></script>
</head>
<body onload="Main.init();">

<div class="page" id="LoginPage">
	<p>Enter a username to begin!</p>
	<input type='text' placeholder="username" id="LPuser" />
	<select>
		<option>Naughts & Crosses</option>
	</select>
	<a class='button' onclick="Main.goTo('MatchPage');">begin</a>
</div>

<div class="page" id="MatchPage">
	<a class='button back' onclick="Main.goTo('LoginPage');">exit</a>
	<p>Welcome. Please select an option to begin playing.</p>
	<a class='button normal' onclick="Main.goTo('FindMatchPage');">find match</a>
	<a class='button normal' onclick="Main.goTo('HostMatchPage');">host match</a>
</div>

<div class="page" id="FindMatchPage">
	<a class='button back' onclick="Main.goTo('MatchPage');">back</a>
	<p id="FMPindicator">searching...</p>
	<ul id="FMPlist">
		<li>blah</li>
		<li>blah</li>
		<li>blah</li>
		<li>blah</li>
		<li>blah</li>
		<li>blah</li>
		<li>blah</li>
		<li>blah</li>
		<li>blah</li>
		<li>blah</li>
	</ul>
</div>

<div class="page" id="HostMatchPage">
	<a class='button back' onclick="Main.goTo('MatchPage');">back</a>
	<p id="HMPindicator">searching for opponent...</p>
	<p class="HMPdetails"><span>bob</span> vs <span>...</span></p>
	<a class='button' onclick='Controller.HostMatchPage.begin(this);'>begin</a>
</div>

<div class="page" id="GamePage">
	<a class='button back' onclick="Main.goTo('MatchPage');">quit game</a>
	<canvas id="GameBoard"></canvas>
	<div id="ScoreBoard">
		<div class="player" id="player1">bob</div>
		<div class="player selected" id="player1">joe</div>
	</div>
	<div id="Console"></div>
</div>

</body>
</html>